<script lang="js">
import {ref} from 'vue'

export default {
  inject: ['reload'],
  data() {
    return {
      borderColor: ref('rgb(0,0,0)'),
      backgroundColor: ref('rgb(255,255,255)'),
      changeAsideCss: ref(false),
      groupId: localStorage.getItem('groupId'),
    }
  },
  methods: {
    changeAsideCssFun() {
      this.changeAsideCss = this.changeAsideCss ? ref(false) : ref(true)
    },
    toLogin() {
      this.$router.push("/login")
    },
    clearLoginCatch() {
      localStorage.removeItem("groupId")
      localStorage.removeItem("userId")
      this.reload()
    },
    openFish() {
      this.$router.push("/fish")
      this.changeAsideCss = true
    },
  },
}
</script>

<template>
  <el-container style="height: 95vh;">
    <el-aside :id="this.changeAsideCss === false ? 'aside' : 'aside_1'">
      <div class="shrink-button-div">
        <el-button size="large" @click="this.changeAsideCssFun()" style="width: 100%;" text>
          | | |
        </el-button>
      </div>
      <div class="menu-div">
        <el-menu :collapse="this.changeAsideCss"
                 :unique-opened="true"
                 class="custom-menu"
                 router>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Guide></Guide>
              </el-icon>
              <span>poke</span>
            </template>
            <el-sub-menu index="1-2">
              <template #title><span>我的poke</span></template>
              <el-menu-item index="/myPoke">poke列表</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/poke">poke列表</el-menu-item>
            <el-menu-item index="/skill">招式列表</el-menu-item>
            <el-sub-menu index="1-3">
              <template #title><span>poke对决</span></template>
              <el-menu-item index="/duel">对决列表</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <MagicStick></MagicStick>
              </el-icon>
              <span>鱼！！！</span>
            </template>
            <el-menu-item index="/fish">鱼</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/aboutUs">
            <el-icon>
              <InfoFilled></InfoFilled>
            </el-icon>
            <template #title>
              <span>关于我们</span>
            </template>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
    <el-container>
      <el-header id="header">
        <div class="background-color-div">
          设置边框主题：
          <el-color-picker v-model="this.borderColor" show-alpha></el-color-picker>
          设置背景主题：
          <el-color-picker v-model="this.backgroundColor" show-alpha></el-color-picker>
          <el-link @click="this.toLogin()" style="margin-left: 5px; font-weight: bolder;" v-if="this.groupId == null">
            去登录
          </el-link>
          <el-link @click="this.clearLoginCatch()" style="margin-left: 5px; font-weight: bolder;"
                   v-if="this.groupId != null">清除登录缓存
          </el-link>
        </div>
      </el-header>
      <el-main id="main">
        <RouterView></RouterView>
      </el-main>
      <!--            <el-footer id="footer">-->
      <!--                <div class="footer-div">-->
      <!--                    warframeBot · 沃肥机器人-->
      <!--                </div>-->
      <!--            </el-footer>-->
    </el-container>
  </el-container>
</template>

<style scoped>
#aside {
  border: v-bind(borderColor) 2px solid;
  margin: 5px;
  border-radius: 25px;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), v-bind(backgroundColor));
  background-size: cover;
  animation: aside_open 0.5s;
  overflow-x: hidden;
}

@keyframes aside_open {
  0% {
    width: 100px;
  }
  100% {
    width: 300px;
  }
}

#aside_1 {
  border: v-bind(borderColor) 2px solid;
  margin: 5px;
  border-radius: 25px;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), v-bind(backgroundColor));
  background-size: cover;
  width: 100px;
  animation: aside_close 0.5s;
  overflow-x: hidden;
}

@keyframes aside_close {
  0% {
    width: 300px;
  }
  100% {
    width: 100px;
  }
}

#header {
  border: v-bind(borderColor) 2px solid;
  margin: 5px;
  border-radius: 25px;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), v-bind(backgroundColor));
  background-size: cover;
}

#main {
  border: v-bind(borderColor) 2px solid;
  margin: 5px;
  border-radius: 25px;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), v-bind(backgroundColor));
  background-size: cover;
  overflow-x: hidden;
  overflow-y: hidden;
}

#footer {
  border: v-bind(borderColor) 2px solid;
  margin: 5px;
  border-radius: 25px;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), v-bind(backgroundColor));
  background-size: cover;
}

.background-color-div {
  margin-top: 10px;
  text-align: right;
}

.shrink-button-div {
  width: 100%;
  margin-top: 10px;
  text-align: center;
  background-image: linear-gradient(to top, rgba(255, 0, 0, 0), v-bind(backgroundColor));
}

.menu-div {
  --el-menu-bg-color: linear-gradient(to top, rgba(255, 0, 0, 0), v-bind(backgroundColor));
  height: 88vh;
}

.custom-menu {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%) !important;
  border-radius: 12px !important;
  padding: 8px 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  width: 100%;
  height: 100%;
}

:deep(.custom-menu .el-menu-item),
:deep(.custom-menu .el-sub-menu__title) {
  color: #000000 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Segoe UI', system-ui !important;
  margin: 4px 12px !important;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

:deep(.custom-menu .el-menu-item:hover),
:deep(.custom-menu .el-sub-menu__title:hover) {
  background: linear-gradient(90deg, #fafafa 0%, rgba(10, 30, 54, 0.08) 100%) !important;
  transform: translateX(4px) !important;
  box-shadow: 2px 2px 8px rgba(15, 40, 70, 0.08) !important;
}

:deep(.custom-menu .el-menu-item.is-active) {
  background: linear-gradient(90deg, #fafafa 0%, #1680ee 100%) !important;
  position: relative !important;
}

:deep(.custom-menu .el-menu-item.is-active)::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 60% !important;
  width: 3px !important;
  background: #000000 !important;
  border-radius: 2px !important;
}

.footer-div {
  text-align: right;
}
</style>
